<template>
  <div class="maintenancePlan">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="searchForm"
          :search-tags="searchTags"
          :select-list="selectList"
          :label-width=" '130px'"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <div class="table-buttons">
      <el-button
        v-btnPermission:add
        type="primary"
        icon="el-icon-plus"
        @click="newAdd">{{
          $t("add")
        }}</el-button>
      <el-button
        v-btnPermission:edit
        :disabled="UpdateDisabled"
        type="primary"
        icon="el-icon-edit"
        @click="modify">
        {{ $t("modify") }}</el-button
        >
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="doDelete">{{
          $t("delete")
        }}</el-button>
    </div>
    <!-- 表单部分 -->
    <el-card>
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <!-- 弹窗组件 -->
    <formDialog ref="formDialog" @initList="initList"/>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import { betterTips } from '@/utils/notification'
import planManageApi from '@/api/maintenance/planManage'
import eqpbaseApi from '@/api/equipment/eqpbase'
import { getAllUserList } from '@/api/system/user'
import { getPMFormList } from '@/api/eForm/eFormCheck'
import formDialog from './components/formDialog'
export default {
  name: 'MaintenancePlan',
  components: { formDialog },
  mixins: [mySetting],
  props: {},
  data() {
    return {
      searchForm: {},
      searchTags: [
        { label: this.$t('eqpName'), prop: 'EqpName', tag: 'DynSelect' },
        { label: this.$t('MaintenancePlanName'), prop: 'pmScheduleName', tag: 'DynInput' },
        { label: this.$t('pmTypeName'), prop: 'pmTypeName', tag: 'DynSelect' },
        { label: this.$t('Checklist'), prop: 'formId', tag: 'DynSelect' },
        { label: this.$t('NotificationofuserIDlist'), prop: 'notifyUserIdList', tag: 'DynSelect' }
      ],
      selectList: {},
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'pmScheduleName', label: this.$t('MaintenancePlanName') },
        { prop: 'pmTypeName', label: this.$t('pmTypeName') },
        { prop: 'formName', label: this.$t('Checklist') },
        { prop: 'editTime', label: this.$t('nextPMDate') },
        { prop: 'pmLeastTime', label: this.$t('MinimummaintenanceTime') },
        { prop: 'notifyAdvanceDays', label: this.$t('NumberofdaysinAdvance') },
        { prop: 'createTime', label: this.$t('createTime'), width: '150px' },
        { prop: 'status', label: this.$t('status'), templete: (_scope) => {
          return (
            <el-switch
              v-model={_scope.row.status}
              active-value={1}
              inactive-value={0}
              active-color={'#13ce66'}
              inactive-color={'#ff4949'}
              disabled
            />
          )
        } }
      ],
      tableLoading: true
    }
  },
  computed: {},
  watch: {},
  created() {
    Promise.race([this.initList(), this.getEqpNameList(),
      this.getPMTypeNames(), this.getUserList(), this.getPMFormList()])
  },
  mounted() {},
  methods: {
    async initList() {
      const res = await planManageApi.getList(this.$clearNull({ ...this.searchForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    newAdd() {
      this.$refs.formDialog.handleOpen()
    },
    modify() {
      this.$refs.formDialog.handleOpen(this.multipleSelection[0])
    },
    // 删除
    doDelete() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map(ele => ele.id)
        planManageApi.doDelete({ ids }).then(res => {
          betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    // 获取设备名称
    async getEqpNameList() {
      const res = await eqpbaseApi.getHandleList()
      this.$set(this.selectList, 'EqpName', res.data)
    },
    // 维保类型
    async getPMTypeNames() {
      const res = await planManageApi.getPMTypeNames()
      this.$set(this.selectList, 'pmTypeName', res.data)
    },
    // 工号列表
    async getUserList() {
      const res = await getAllUserList()
      this.$set(this.selectList, 'notifyUserIdList', res.data)
    },
    // 状态
    // async getStatus() {
    //   const res = await planManageApi.getStatus()
    //   this.$set(this.selectList, 'status', res.data)
    // },
    // 检查表单
    async getPMFormList() {
      const res = await getPMFormList()
      this.$set(this.selectList, 'formId', res.data)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  .el-form-item:last-child {
    margin: 0 0 15px 0;
  }
}
</style>
